<template>
    <div>
        <div class="form-group areas-style">
            <label class="col-md-3 control-label">省 :</label>
            <div class="col-md-3 select-box">
                <select class="form-control" v-model="selected.province" id="proviceIndex">
                    <option v-for="item in provincelist" value="{{item.key}}">{{item.text}}</option>
                </select>
            </div>
            <label class="col-md-2 control-label" >市 :</label>
            <div class="col-md-3 select-box">
                <select class="form-control" v-model="selected.city" id="cityIndex">
                     <option v-for="item in citylist" value="{{item.key}}">{{item.text}}</option>
                </select>
            </div>
        </div>
        <div class="form-group areas-style">
            <label class="col-md-3 control-label">县(区) :</label>
            <div class="col-md-3 select-box">
                <select class="form-control" v-model="selected.district" id="areaIndex">
                    <option v-for="item in arealist" value="{{item.key}}">{{item.text}}</option>
                </select>
            </div>
            <label class="col-md-2 control-label" >街道 :</label>
            <div class="col-md-3 select-box">
                <select class="form-control" v-model="selected.street" id="streetIndex">
                     <option v-for="item in streetlist" value="{{item.key}}">{{item.text}}</option>
                </select>
            </div>
        </div>
    </div>
</template>
<script>
import Public from 'assets/public.js'
module.exports = {
    data() {
            return {
                provincelist:[],
                citylist:[],
                arealist:[],
                streetlist:[],
                // selected:{
                //     province:"",
                //     city:"",
                //     district:"",
                //     street:""
                // },
           
            }
        },
        props: {
          "defaultarea":{
             type:Object,
             default:function(){
                return {
                    province:"",
                    city:"",
                    district:"",
                    street:""
                }
             }
            },

        },
        computed: {
            selected: function() {
                return this.defaultarea
            }
        },
        ready() {
            var that = this;
            this.getchilddata();

        },
        methods: {
            getchilddata(val,sign) {
                var that=this;
                var url = Public.AREA_URL();
                var params = {
                    limit: 50
                };
                if (val) {
                    params.parentKey=val;
                }else{
                  delete params.parentKey
                }
                $.ajax({
                    url: url,
                    type: "GET",
                    headers: {
                        "X-Access-Token": sessionStorage.getItem('accessToken'),
                    },
                    data: params,
                    beforeSend: function() {
                        Public.loading("")
                    },
                    success: function(res) {
                        Public.stoploading();
                        if(sign=="city"){
                            that.citylist=res.items;
                        }else if(sign=="district"){
                            that.arealist=res.items;
                        }else if(sign=="street"){
                            that.streetlist=res.items;
                        }
                        else{
                             that.provincelist=res.items;
                        }
                        that.$dispatch('areadata', that.selected)
                        
                    },
                    error: function(err) {
                        Public.stoploading();
                        return err
                    }
                });



            }
        },
        watch:{
            'selected.province' (val,oldval){
                //通过省获取市
                this.getchilddata(val,"city");

            },
             'selected.city' (val,oldval){
                  //通过市区县
                this.getchilddata(val,"district");
            },
             'selected.district' (val,oldval){
                  //通过区县获取街道
               this.getchilddata(val,"street");
            },
             'selected.street' (val,oldval){
                this.$dispatch('areadata', this.selected)
            },
             
        },
        events:{
            // 'editarea' (editarea){
            // console.log(this.selected);
            //    this.selected=editarea
            // }
        }
}
</script>
<style scoped>
  /*地区联动*/
  div.areas-style{
    display: block;
    margin-bottom: 10px;
    height: 36px;
  }
  div.areas-style label{
    display: inline-block;
    width: 60px;
    padding: 0 5px;
    height: 34px;
  }
  div.areas-style select{
    display: inline-block;
    width: 150px;
  }
  div.areas-style .select-box{
    display: inline-block;
    margin-right: 5px;
  }
  .col-md-3{
    width: 150px;
    padding: 0;
  }
</style>
